<app-left-line
  [text]="'银行划扣'"
></app-left-line>

<div class="bank-message-confirm card" #bankMessageConfirm>
  <div class="confirm-header">
  </div>

  <form class="confirm-content" nz-form [formGroup]="validateForm">
    <nz-form-item>
      <nz-form-label nzRequired [nzNoColon]='true'>用户编号</nz-form-label>
      <nz-form-control [nzSpan]="18" >
        <nz-select
          style="width: 300px;"
          formControlName="usageCode"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="请选择用户编号"
          (ngModelChange)="onUsageCodeChange($event)"
          [nzLoading]="usageCodeLoading"
        >
          <nz-option *ngFor="let item of usageCodeInfo" 
            [nzLabel]="item.usageCode" [nzValue]="item.usageCode"
          >
          </nz-option>
        </nz-select>
        <app-err-msg  *ngIf="validateForm.get('usageCode')?.dirty && validateForm.get('usageCode')?.invalid">
          请选择用户编号
        </app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzNoColon]='true'>用水地址</nz-form-label>
      <nz-form-control [nzSpan]="18" >
        <input nz-input formControlName="address" readonly />
      </nz-form-control>
    </nz-form-item>

    <!-- 结算属性 id balanceProperty -->
    <nz-form-item>
      <nz-form-label nzRequired [nzNoColon]='true'>结算属性</nz-form-label>
      <nz-form-control [nzSpan]="18" >
        <nz-select
          style="width: 300px;"
          formControlName="balanceProperty"
          nzShowSearch
          nzPlaceHolder="请选择结算属性"
          (ngModelChange)="onBalanceProperty($event)"
        >
          <nz-option *ngFor="let item of balancePropertys" 
            [nzLabel]="item.name" [nzValue]="item.bp"
          >
          </nz-option>
        </nz-select>
        <app-err-msg *ngIf="validateForm.get('balanceProperty')?.dirty && validateForm.get('balanceProperty')?.invalid">
          请选择结算属性
        </app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <!-- 办理类型 -->
    <nz-form-item>
      <nz-form-label nzRequired [nzNoColon]='true'>办理类型</nz-form-label>
      <nz-form-control [nzSpan]="18" >
        <nz-select
          style="width: 300px;"
          formControlName="businessType"
          nzShowSearch
          nzPlaceHolder="请选择办理类型"
          (ngModelChange)="onbusiTypeChange($event)"
        >
          <nz-option nzLabel="办理银行划扣" nzValue="0">
          </nz-option>
          <!-- <nz-option nzLabel="取消银行划扣" nzValue="1">
          </nz-option> -->
        </nz-select>
        <app-err-msg *ngIf="validateForm.get('businessType')?.dirty && validateForm.get('businessType')?.invalid"
        >请选择结算属性</app-err-msg>
      </nz-form-control>
    </nz-form-item>

   
    <nz-form-item *ngIf="validateForm.get('businessType')?.value === '0'">
      <nz-form-label nzRequired [nzNoColon]='true'>银行账号</nz-form-label>
      <nz-form-control [nzSpan]="18" >
        <input (blur)="accountOnBlur()" nz-input formControlName="account" placeholder="请输入银行账号"/>
        <app-err-msg *ngIf="validateForm.get('account')?.dirty && validateForm.get('account')?.errors"
        >请输入银行账号</app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngIf="validateForm.get('businessType')?.value === '0'">
      <nz-form-label nzRequired [nzNoColon]='true'>开户银行</nz-form-label>
      <nz-form-control [nzSpan]="18" >
        <nz-select *ngIf="pageType !== 0"
          style="width: 300px;"
          nzShowSearch
          nzServerSearch
          nzPlaceHolder="请输入开户银行"
          nzAllowClear
          [nzFilterOption]="nzFilterOption"
          formControlName="bankId"
          (nzOnSearch)="bankSearch($event)"
          [nzNotFoundContent]="'未查找到开户银行，请检查银行账号'"
          [nzLoading]="bankIsLoading"
          (ngModelChange)="onBankChange($event)"
        >
          <nz-option *ngFor="let bank of bankList" [nzLabel]="bank.bankName" [nzValue]="bank.bankId"> </nz-option>
        </nz-select>
        <input *ngIf="pageType === 0" nz-input formControlName="bankName"  placeholder="请输入账户名称"/>
        <app-err-msg *ngIf="validateForm.get('bankId')?.dirty && validateForm.get('bankId')?.invalid"
        >开户银行不能为空</app-err-msg>
      </nz-form-control>
    </nz-form-item>
    
    <nz-form-item>
      <nz-form-label nzRequired [nzNoColon]='true'>银行账户名称</nz-form-label>
      <nz-form-control [nzSpan]="18" >
        <input nz-input formControlName="accountName"  placeholder="个人：张**；单位：**公司"/>
        <app-err-msg *ngIf="validateForm.get('accountName')?.dirty && validateForm.get('accountName')?.invalid"
        >银行账户名称不能为空</app-err-msg>
      </nz-form-control>
    </nz-form-item>

    

    <nz-form-item *ngIf="balanceProperty === '0' || balanceProperty === '1'">
      <nz-form-label *ngIf="balanceProperty === '0'" nzRequired [nzNoColon]='true'>开户人证件号</nz-form-label>
      <nz-form-label *ngIf="balanceProperty === '1'" nzRequired [nzNoColon]='true'>单位证件号</nz-form-label>
      <nz-form-control [nzSpan]="18" >
        <input nz-input formControlName="certificateNum"  placeholder="请输入证件号"/>
        <app-err-msg *ngIf="validateForm.get('certificateNum')?.dirty && validateForm.get('certificateNum')?.invalid"
        >证件号不能为空</app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzRequired [nzNoColon]='true'>{{ balanceProperty === '0'?'开户人联系电话':'单位联系电话' }}</nz-form-label>
      <nz-form-control [nzSpan]="18" >
        <input nz-input formControlName="contactPhone"  placeholder="请输入电话"/>
        <app-err-msg *ngIf="validateForm.get('contactPhone')?.dirty && validateForm.get('contactPhone')?.invalid"
        >请输入正确格式的电话</app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngIf="validateForm.get('businessType')?.value === '0'">
      <nz-form-label [nzRequired]="balanceProperty === '1'" [nzNoColon]='true'>电子邮箱</nz-form-label>
      <nz-form-control [nzSpan]="18" >
        <input nz-input formControlName="email"  placeholder="可用于接收水费、污水费电子发票"/>
        <div *ngIf="validateForm.get('email')?.dirty && validateForm.get('email')?.invalid">
          <app-err-msg *ngIf="validateForm.get('email')?.errors?.['required']"
          >请输入邮箱</app-err-msg>

          <app-err-msg *ngIf="validateForm.get('email')?.errors?.['pattern']"
          >请输入正确格式的邮箱</app-err-msg>

          <!-- <app-err-msg *ngIf="validateForm.get('email')?.errors?.maxByteLength"
            errorMsg="邮箱字数超过限制(最多50个字符)"
          ></app-err-msg> -->
        </div>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngIf="validateForm.get('businessType')?.value === '0' && balanceProperty === '1'">
      <nz-form-label [nzNoColon]='true'>邮寄地址</nz-form-label>
      <nz-form-control [nzSpan]="18" >
        <input nz-input formControlName="mailAddress"  placeholder="请输入邮寄地址"/>
        <app-err-msg *ngIf="validateForm.get('mailAddress')?.dirty && validateForm.get('mailAddress')?.invalid"
          errorMsg="邮寄地址字数超过限制(最多100个字符)"
        ></app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <!-- 单位 -->
    <nz-form-item *ngIf="balanceProperty === '1'">
      <nz-form-label nzRequired [nzNoColon]='true'>委托人姓名</nz-form-label>
      <nz-form-control [nzSpan]="18" >
        <input nz-input formControlName="trustorName"  placeholder="请输入委托人姓名"/>
        <app-err-msg *ngIf="validateForm.get('trustorName')?.dirty && validateForm.get('trustorName')?.invalid"
          errorMsg="委托人姓名不能为空"
        ></app-err-msg>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngIf="balanceProperty === '1'">
      <nz-form-label nzRequired [nzNoColon]='true'>委托人电话</nz-form-label>
      <nz-form-control [nzSpan]="18" >
        <input nz-input formControlName="trustorTel"  placeholder="请输入电话"/>
        <app-err-msg *ngIf="validateForm.get('trustorTel')?.dirty && validateForm.get('trustorTel')?.invalid">
          请输入正确格式的电话
        </app-err-msg>
      </nz-form-control>
    </nz-form-item>


    <!-- 2021年09月13日 walle 新增 -->
    <!-- 根据结算属性控制显示的字段 -->
    <!-- 个人 -->
    
    <div *ngIf="balanceProperty === '0'" style="width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;">
      <nz-form-item style="width: 417px;" >
        <app-file-upload style="width: 100%"
          (uploadBack)="uploadBack($event, 'identityPic')"
          [title]="'开户人身份证明信息'"
          [subTitle]="'与开户人信息一致的身份证明信息照片'"
          [required]="'true'"
          [fileNum]="2"
          [uploadAvailable]="pageType != 0"
          [deleteAvailable]="pageType != 0"
          [previewIdStr]="validateForm.get('identityPic')?.value"
          [errMsg]="(validateForm.get('identityPic')?.dirty && validateForm.get('identityPic')?.invalid) ? '请上传 开户人身份证明信息' : '' "
        >
        </app-file-upload>
      </nz-form-item>
      <nz-form-item style="width: 417px;" *ngIf="validateForm.get('businessType')?.value === '0'">
        <app-file-upload 
          (uploadBack)="uploadBack($event, 'accountPic')" 
          [title]="'银行账户信息'"
          [subTitle]="'上传与银行账号一致的借记卡、储蓄卡、存折照片'"
          [required]="'true'"
          [uploadAvailable]="pageType != 0"
          [deleteAvailable]="pageType != 0"
          [previewIdStr]="validateForm.get('accountPic')?.value"
          [errMsg]="(validateForm.get('accountPic')?.dirty && validateForm.get('accountPic')?.invalid) ? '请上传 银行账户信息' : '' "
        >
        
        </app-file-upload>
      </nz-form-item>
    </div>

    <div *ngIf="balanceProperty === '1'" style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;">
      <nz-form-item style="width: 417px;">
        <app-file-upload style="min-height: 118px;"
          (uploadBack)="uploadBack($event, 'identityPic')" 
          [title]="'委托人身份证'"
          [subTitle]="'与委托人信息一致的身份证照片'"
          [required]="'true'"
          [fileNum]="2"
          [uploadAvailable]="pageType != 0"
          [deleteAvailable]="pageType != 0"
          [previewIdStr]="validateForm.get('identityPic')?.value"
          [errMsg]="(validateForm.get('identityPic')?.dirty && validateForm.get('identityPic')?.invalid) ? '请上传 委托人身份证' : ''"
        >
        </app-file-upload>
      </nz-form-item>

      <nz-form-item style="width: 417px;">
        <app-file-upload 
          (uploadBack)="uploadBack($event, 'companyPic')" 
          [title]="'单位证件'"
          [subTitle]="'与单位证件信息一致的统一社会信用代码证书或者营业执照'"
          [required]="'true'"
          [uploadAvailable]="pageType != 0"
          [deleteAvailable]="pageType != 0"
          [previewIdStr]="validateForm.get('companyPic')?.value"
          [errMsg]="(validateForm.get('companyPic')?.dirty && validateForm.get('companyPic')?.invalid) ? '请上传 单位证件' : '' "
        >
        </app-file-upload>
      </nz-form-item>

      <nz-form-item style="width: 417px;" *ngIf="validateForm.get('businessType')?.value === '0'">
        <app-file-upload 
          (uploadBack)="uploadBack($event, 'balanceAuthPic')" 
          [title]="'划扣授权书'"
          [subTitle]="'加盖单位公章的代扣水费及污水费的划扣授权书'"
          [required]="'true'"
          [uploadAvailable]="pageType != 0"
          [deleteAvailable]="pageType != 0"
          [previewIdStr]="validateForm.get('balanceAuthPic')?.value"
          [errMsg]="(validateForm.get('balanceAuthPic')?.dirty && validateForm.get('balanceAuthPic')?.invalid) ? '请上传 划扣授权书' : '' "
        >
          <!-- [downLoad]="{ href: 'assets/images/preview/授权委托书（一式三份）.pdf', title: '授权委托书（一式三份）.pdf' }" -->
        </app-file-upload>
      </nz-form-item>

      <nz-form-item style="width: 417px;">
        <app-file-upload 
          (uploadBack)="uploadBack($event, 'businessAuthPic')" 
          [title]="'业务委托书'"
          [subTitle]="'产权单位关于委托委托人办理银行代扣业务的委托书'"
          [required]="'true'"
          [uploadAvailable]="pageType != 0"
          [deleteAvailable]="pageType != 0"
          [previewIdStr]="validateForm.get('businessAuthPic')?.value"
          [errMsg]="(validateForm.get('businessAuthPic')?.dirty && validateForm.get('businessAuthPic')?.invalid) ? '请上传 业务委托书' : ''"
        >
        </app-file-upload>
      </nz-form-item>

    </div>

    <div class="button-box" *ngIf="btnIsVisible">
      <div
        style="display: flex;justify-content: flex-end;" class="waterAgreementNo"
      >
        <div style="display: flex;justify-content: space-between;">
          <a 
            style="color: #06c2d3; border: 1px dashed #d9d9d9;height: 38px;padding: 0 6px;
                display: flex;align-items: center;justify-content: center;margin-right: 20px;
              " 
            (click)="viewPDF()" 
          >
          <svg style="margin-right: 6px;" t="1649840331585" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5503" width="16" height="16"><path d="M137.6 886.4h592V992h-592z m217.6-105.6l531.2-531.2L668.8 32 137.6 560l3.2 211.2z" p-id="5504" fill="#06c2d3"></path></svg>
          签署业务办理单</a>
        </div>
      </div>

      <button [nzLoading]="btnLoading" [disabled]="btnDisabled" type="button" nz-button nzType="default" (click)="onReset()">取消</button>
      <button [nzLoading]="btnLoading" [disabled]="btnDisabled" type="button" nz-button nzType="primary"  (click)="onSubmit()">提交</button>
    </div>
    <div class="button-box" *ngIf="!btnIsVisible">
      <button nz-button (click)="onBack()">返回</button>
    </div>
  </form>

  <!-- <nz-alert nzType="info" *ngIf="balanceProperty === '1'" style="margin: 16px 0;" nzShowIcon
    nzDescription="发票信息默认使用银行账户名称，如有其他需求请到营业厅办理！"
  >
  </nz-alert> -->
 
  <nz-modal
    [(nzVisible)]="modalIsVisible" 
    nzTitle="银行划扣协议" 
    (nzOnCancel)="modalHandleCancel()" 
    (nzOnOk)="modalHandleOk()"
    nzOkText="签署"
    [nzContent]="modalContent"
    nzCancelText="确定"
    [nzWidth]="800"
  >

  </nz-modal>
  <ng-template #modalContent>
    <nz-spin [nzTip]="'等待中。。。'" [nzSize]="'large'" [nzSpinning]="nzSpinning">
      <div id="pdfpreview" class="modal-content" style="height: 420px;">
      </div>
    </nz-spin>
  </ng-template>
  
  <nz-modal
    [(nzVisible)]="signModalVisible" 
    nzTitle="签署银行划扣协议" 
    (nzOnCancel)="signModalCancel()" 
    (nzOnOk)="signModalOk()"
    [nzContent]="signModalContent"
    [nzCancelText]="null"
    [nzWidth]="650"
    [nzFooter]="null"
  >
  </nz-modal>
  <ng-template #signModalContent>
    <div id="sign-name" class="modal-content">
      <p>请在下方签名：</p>
      <canvas style="border: 1px solid #ccc;" id="name-canvas">
        您的浏览器不支持canvas签名，请更换Google chrome
      </canvas>
      <div class="name-canvas-btn" style="text-align: right;">
        <button (click)="clearName()" type="button" style="border-radius: 0;" nz-button nzType="default">清除</button>
        <button (click)="saveName()" type="button" style="border-radius: 0;margin-left: 16px;" nz-button nzType="primary">确认签署</button>
      </div>
    </div>
  </ng-template>
</div>
